import React, { useState } from 'react';
import { ChevronLeft, MapPin, Calendar, Users } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import TrainingApplicationModal from '../components/modals/TrainingApplicationModal';

// Mock current user data
const currentUser = {
  name: '张经理',
  position: '销售经理'
};

const trainings = [
  {
    id: 1,
    title: '2024经销商大会',
    date: '2024.04.15 - 2024.04.20',
    location: '浙江 杭州',
    participants: 245,
    status: 'pending',
    cover: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4'
  },
  {
    id: 2,
    title: '2024客户答谢会',
    date: '2024.06.01 - 2024.06.02',
    location: '上海 浦东',
    participants: 180,
    status: 'approved',
    cover: 'https://images.unsplash.com/photo-1517048676732-d65bc937f952'
  },
  {
    id: 3,
    title: '2024寒冰亮剑',
    date: '2024.12.01 - 2024.12.05',
    location: '深圳 南山',
    participants: 0,
    status: 'rejected',
    cover: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f'
  }
];

export default function OrganizedTrainingsPage() {
  const navigate = useNavigate();
  const [showApplicationModal, setShowApplicationModal] = useState(false);

  const handleSubmitApplication = (data: any) => {
    // 处理培训申请提交
    console.log('Training application submitted:', data);
    setShowApplicationModal(false);
    
    // 显示成功提示
    alert('您的培训计划已经提报培训中心，请等待培训专家与您联系。');
  };

  const getStatusStyle = (status: string) => {
    switch (status) {
      case 'approved':
        return 'bg-green-100 text-green-600';
      case 'pending':
        return 'bg-yellow-100 text-yellow-600';
      case 'rejected':
        return 'bg-red-100 text-red-600';
      default:
        return 'bg-gray-100 text-gray-600';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'approved':
        return '已通过';
      case 'pending':
        return '审核中';
      case 'rejected':
        return '已拒绝';
      default:
        return '未知状态';
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white px-4 py-3 flex items-center justify-between border-b sticky top-0 z-10">
        <div className="flex items-center">
          <button onClick={() => navigate('/profile')} className="mr-4">
            <ChevronLeft className="w-6 h-6 text-gray-600" />
          </button>
          <h1 className="text-xl font-semibold">我组织的训练</h1>
        </div>
        <button 
          onClick={() => setShowApplicationModal(true)}
          className="px-4 py-2 bg-blue-500 text-white rounded-full text-sm font-medium hover:bg-blue-600 transition-colors"
        >
          发起培训
        </button>
      </div>

      <div className="p-4 space-y-4">
        {trainings.map(training => (
          <div
            key={training.id}
            className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
          >
            <div className="relative h-48">
              <img
                src={training.cover}
                alt={training.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
              <div className="absolute bottom-4 left-4 right-4">
                <h3 className="text-xl font-bold text-white mb-2">{training.title}</h3>
                <div className="flex flex-wrap gap-2">
                  <span className="flex items-center bg-white/20 backdrop-blur-sm text-white rounded-full px-3 py-1 text-sm">
                    <Calendar className="w-4 h-4 mr-1.5" />
                    {training.date}
                  </span>
                  <span className="flex items-center bg-white/20 backdrop-blur-sm text-white rounded-full px-3 py-1 text-sm">
                    <MapPin className="w-4 h-4 mr-1.5" />
                    {training.location}
                  </span>
                  <span className="flex items-center bg-white/20 backdrop-blur-sm text-white rounded-full px-3 py-1 text-sm">
                    <Users className="w-4 h-4 mr-1.5" />
                    {training.participants}人
                  </span>
                </div>
              </div>
            </div>
            <div className="p-4">
              <span className={`px-3 py-1 rounded-full text-sm ${getStatusStyle(training.status)}`}>
                {getStatusText(training.status)}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* 培训申请模态框 */}
      {showApplicationModal && (
        <TrainingApplicationModal
          currentUser={currentUser}
          onClose={() => setShowApplicationModal(false)}
          onSubmit={handleSubmitApplication}
        />
      )}
    </div>
  );
}